<app-cheat-sheet [cheatSheet]="cheatSheet">


    <div class="row align-items-center">
        <div class="col-12 col-md-6">
            <table class="table table-sm table-hover table-bordered">
                <thead class="text-center">
                    <tr>
                        <th colspan="2">Buildings needed<a href="#note_building_processing">^</a> to</th>
                        <th colspan="3">Empty Input Belt</th>
                    </tr>
                    <tr>
                        <th>With</th>
                        <th>Input</th>
                        <th>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Transport_belt')"></app-factorio-icon>
                        </th>
                        <th>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Fast_transport_belt')"></app-factorio-icon>
                        </th>
                        <th>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Express_transport_belt')"></app-factorio-icon>
                        </th>
                    </tr>
                </thead>
                <tbody class="text-center">
                    <tr *ngFor="let item of sheetData?.beltEmpty; let idx=index">
                        <td>
                            <app-factorio-icon *ngFor="let iconId of item?.processor" [icon]="dataService.getFactorioIcon(iconId)"></app-factorio-icon>
                        </td>
                        <td *ngIf="idx%2 == 0" rowspan="2">
                            <app-factorio-icon *ngFor="let iconId of item?.material" [icon]="dataService.getFactorioIcon(iconId)"></app-factorio-icon>
                        </td>
                        <td class="bg-input">{{item?.beltYellow}}</td>
                        <td class="bg-input">{{item?.beltRed}}</td>
                        <td class="bg-input">{{item?.beltBlue}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="col-12 col-md-6">
            <table class="table table-sm table-hover table-bordered">
                <thead class="text-center">
                    <tr>
                        <th colspan="2">Buildings needed<a href="#note_building_processing">^</a> to</th>
                        <th colspan="3">Fill Output Belt</th>
                    </tr>
                    <tr>
                        <th>With</th>
                        <th>Output</th>
                        <th>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Transport_belt')"></app-factorio-icon>
                        </th>
                        <th>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Fast_transport_belt')"></app-factorio-icon>
                        </th>
                        <th>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Express_transport_belt')"></app-factorio-icon>
                        </th>
                    </tr>
                </thead>
                <tbody class="text-center">
                    <tr *ngFor="let item of sheetData?.beltFill; let idx=index">
                        <td>
                            <app-factorio-icon *ngFor="let iconId of item?.processor" [icon]="dataService.getFactorioIcon(iconId)"></app-factorio-icon>
                        </td>
                        <td *ngIf="idx%2 == 0" rowspan="2">
                            <app-factorio-icon *ngFor="let iconId of item?.material" [icon]="dataService.getFactorioIcon(iconId)"></app-factorio-icon>
                        </td>
                        <td class="bg-output">{{item?.beltYellow}}</td>
                        <td class="bg-output">{{item?.beltRed}}</td>
                        <td class="bg-output">{{item?.beltBlue}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <p id="note_building_processing" class="text-muted">^Buildings are rounded up to the nearest whole number.</p>

    <hr>

    <h4 class="card-title" id="smelting-facts">Smelting Facts</h4>
    <div class="row align-items-center">
        <div class="col-12 col-lg-7 col-print-7">
            <ul>
                <li>Smelting iron, copper, and stone each take a base 3.2 seconds to finish.
                    <br> Smelting steel takes a base 16 seconds.
                </li>
                <li>
                    <a href="https://wiki.factorio.com/Stone_furnace" target="_blank" rel="noopener">Stone Furnaces</a> have a crafting speed of 1. <br> Both
                    <a href="https://wiki.factorio.com/Steel_furnace" target="_blank" rel="noopener">Steel</a> and
                    <a href="https://wiki.factorio.com/Electric_furnace" target="_blank" rel="noopener">Electric</a> Furnaces have a crafting speed of 2.
                </li>
                <li>One furnace making iron can support one furnace making steel.</li>
                <li>Stone and Steel Furnaces consume 0.0225 coal/second.</li>
                <li>Common <a href="https://steamcommunity.com/sharedfiles/filedetails/?id=862972621" target="_blank" rel="noopener">Smelter Arrangements</a>.</li>
            </ul>
        </div>

        <div class="col-12 col-lg-5 col-print-5">
            <table class="table table-sm fixed-width">
                <caption class="text-center">Furnaces supplied by coal belt</caption>
                <thead class="text-center">
                    <tr>
                        <th>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Coal')"></app-factorio-icon>
                        </th>
                        <th>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Transport_belt')"></app-factorio-icon>
                        </th>
                        <th>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Fast_transport_belt')"></app-factorio-icon>
                        </th>
                        <th>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Express_transport_belt')"></app-factorio-icon>
                        </th>
                    </tr>
                </thead>
                <tbody class="text-center">
                    <tr>
                        <td>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Stone_furnace')"></app-factorio-icon>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Steel_furnace')"></app-factorio-icon>
                        </td>
                        <td *ngFor="let item of sheetData?.coalConsumption">{{item?.furnacesSupplied}}</td>
                    </tr>
                </tbody>
            </table>
            <p class="text-center"><kbd>Buildings = Belt Throughput / Material Consumption Rate</kbd></p>
        </div>
    </div>


    <h4 class="card-title" id="uranium-facts">Uranium Facts</h4>
    <div class="row align-items-center">
        <div class="col-12 col-lg-7 col-print-7">
            <ul>
                <li>
                    <a href="https://wiki.factorio.com/Uranium_processing" target="_blank" rel="noopener">Uranium processing</a> has a 99.3% chance to produce 1 uranium-238 and a 0.7% chance to produce 1 uranium-235 from 10 ore.
                </li>
                <li>It's recommended to save up 40 U-235 to kick off the
                    <a href="https://wiki.factorio.com/Kovarex_enrichment_process" target="_blank" rel="noopener">Kovarex Enrichment Process</a> in order to speed up U-235 production.</li>
            </ul>
        </div>

        <div class="col-12 col-lg-5 col-print-5">
            <p class="text-center">
                <app-factorio-icon [icon]="dataService.getFactorioIcon('Uranium_ore', 10000)"></app-factorio-icon>
                <i class="fas fa-long-arrow-alt-right text-muted"></i>
                <app-factorio-icon [icon]="dataService.getFactorioIcon('Uranium-235', 7)"></app-factorio-icon>
                <app-factorio-icon [icon]="dataService.getFactorioIcon('Uranium-238', 993)"></app-factorio-icon>
                <a href="#note_uranium_processing_ratio">**</a>
            </p>
            <p class="text-center">
                <app-factorio-icon [icon]="dataService.getFactorioIcon('Uranium-235', 40)"></app-factorio-icon>
                <app-factorio-icon [icon]="dataService.getFactorioIcon('Uranium-238', 5)"></app-factorio-icon>
                <i class="fas fa-long-arrow-alt-right text-muted"></i>
                <app-factorio-icon [icon]="dataService.getFactorioIcon('Uranium-235', 41)"></app-factorio-icon>
                <app-factorio-icon [icon]="dataService.getFactorioIcon('Uranium-238', 2)"></app-factorio-icon>
            </p>
        </div>
    </div>

    <hr>
    <p id="note_uranium_processing_ratio">
        <small>
            ** 10000 not 1000 ore, as
            <a href="https://wiki.factorio.com/Uranium_processing" target="_blank" rel="noopener">Uranium processing</a>
             takes 10 ore and produces 1 product on average.
        </small>
    </p>

</app-cheat-sheet>
